<template>
	<view class="container">
		<!-- 左上角返回图标 -->
		<view class="back-icon-container" @click="goBack">
			<image class="back-icon" src="/static/alibaba_icon/back.svg" mode="widthFix" />
		</view>

		<!-- 个人内容展示 -->
		<view class="user-info" @click="navigateToTestPage">
			<!-- 头像 -->
			<view class="avatar">
				<image :src="userInfo.userUrl || defaultAvatar" class="avatar-image" mode="aspectFill" />
			</view>

			<!-- 右侧信息 -->
			<view class="user-details">
				<!-- 用户名 -->
				<view class="user-name">{{ userInfo.userName || '游客您好' }}</view>
				<!-- 会员信息 -->
				<view class="membership-info">
					<template v-if="userInfo.isVip">
						<text class="vip">VIP</text>
					</template>
					<template v-else>
						普通会员 {{ maskPhoneNumber(userInfo.userPhone) }}
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex";

	export default {
		computed: {
			...mapState(["userInfo"]),
			defaultAvatar() {
				return "/static/游客登录.png";
			},
		},
		methods: {
			// 号码掩码
			maskPhoneNumber(phone) {
				if (!phone) return "无手机号";
				return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			},

			// 导航跳转
			navigateToTestPage() {
				if (this.userInfo.userName) {
					// 如果用户已登录，则跳转到 test 页面
					uni.navigateTo({
						url: "/pages/user_change/user_change"
					});
				} else {
					// 如果是游客，则跳转到登录页面
					uni.navigateTo({
						url: "/pages/login/login"
					});
				}
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			}
		},
	};
</script>


<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 200px;
		padding: 10px;
		position: relative;
		/* 允许子元素使用绝对定位 */
		background-color: #4285f4;
	}

	.back-icon-container {
		position: absolute;
		top: 10px;
		left: 10px;
		width: 36px;
		height: 36px;
		cursor: pointer;
	}

	.back-icon {
		width: 36px;
		height: 36px;
	}

	.user-info {
		display: flex;
		align-items: center;
		height: 80px;
		width: calc(100% - 20px);
		/* 计算宽度，减去左右 padding */
		background-color: rgba(240, 240, 240, 0.5);
		/* 半透明背景 */
		padding: 10px;
		box-sizing: border-box;
		/* 包含 padding 在内的宽高计算 */
		position: absolute;
		/* 绝对定位到容器底部 */
		bottom: 10px;
		/* 调整底部距离 */
		cursor: pointer;
		/* 鼠标悬停显示为手型 */
		border-radius: 10px;
		/* 添加圆角 */
		margin: 0 auto;
		/* 居中显示 */
		left: 10px;
		right: 10px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
	}

	.user-details {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
	}

	.user-name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.membership-info {
		font-size: 16px;
		color: #555;
	}

	.vip {
		color: gold;
		font-weight: bold;
	}
</style>